<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:ace="http://www.icefaces.org/icefaces/components"
    xmlns:ice="http://www.icesoft.com/icefaces/component"
  xmlns:icecore="http://www.icefaces.org/icefaces/core"
    xmlns:ui="http://java.sun.com/jsf/facelets">
    
     
	<ui:composition template="../WEB-INF/templates/template.xhtml">
	
		<ui:param name="title" value="Fact Entry System" />
        	
		<ui:define name="header">
			<ui:include src="../WEB-INF/templates/header.xhtml" /> 
		</ui:define>
		
		<ui:define name="menu">		
			<ui:include src="../WEB-INF/templates/menuLeft.xhtml" />               
		</ui:define>
		
		<ui:define name="content">
		
		
	      	<style type="text/css">
                /* Important required because row */
                
                .ui-datatable-odd {background-color:lightgray !important;}
                table{width: 100%;}
                .columnAlignCenter{ 
						text-align: center !important; 

				}	
				.columnAlignLeft{ 
						text-align: left !important; 
						padding-left: 10px;

				}
				
				
            </style>
            <h:panelGrid styleClass="formHeaderPanel" columns="2" cellspacing="3" cellpadding="3" columnClasses="col1_leftAlign,col2">
            <h:outputText value="Segment: #{factBean.segmentName}" />              
            <h:outputText value="Month, Year: #{factBean.month},#{factBean.year}" />
            <h:outputText value="Market: #{factBean.marketName}" /> 
            <h:outputText value="Make: #{factBean.makeName}" /> 
            
            </h:panelGrid>      

  			<c:forEach var="fact" items="#{factBean.nodeHierarchy}" varStatus="status">
  				
  				<ice:inputText  value="#{fact.nodeId}" rendered="false" />
  							
  				<c:if test="${fact.nodeType eq 1}">
	  				
	  				
	  				
					<h:panelGrid styleClass="headerPanel" columns="4" cellspacing="3" cellpadding="3" columnClasses="col1_leftAlign,col2,col3,col4">
                
            			<h:outputText value="${fact.label}"/>  
        
						<c:forEach var="scenarioNode" items="#{factBean.scenarioList}">
								<h:outputText value="${scenarioNode.scenarioName}"/>
						</c:forEach>
					
					</h:panelGrid>  
		
							
				</c:if>
				
  				<c:if test="${fact.nodeType eq 2}">
  					<h:panelGrid columns="4" cellspacing="3" cellpadding="3" columnClasses="col1_leftAlign,col2,col3,col4">
	  				    <h:outputText value="${fact.label}"/>
		  				<c:forEach var="node" items="#{fact.nodeFactList}">
		  				<h:panelGroup>
									<h:inputText value="${node.value}" styleClass="textField" required="true" onblur="validateField('',this.id,this.value,${node.minValue},${node.maxValue})"  
									valueChangeListener="#{factBean.saveFactValue}">
										
										<f:attribute name="nodeId" value="${node.entrySetId}" />
										<f:attribute name="entrySetId" value="${node.nodeId}" />
										<f:attribute name="scenarioId" value="${node.scenarioId}" />
									</h:inputText>
									
									<h:inputHidden value="${node.entrySetId}" />
									<h:inputHidden value="${node.nodeId}" />
									<h:inputHidden value="${node.scenarioId}" />
									
									
									<ice:panelGroup panelTooltip="icefaces${node.entrySetId}${node.makeId}${node.nodeId}${node.scenarioId}" styleClass="infoIconPanel">									
									<ice:graphicImage url="/FACTENTRY/javax.faces.resource/question.png.jsf?ln=images"
                                          style="border:none;"
                                          title="Fast Forward"/>
									</ice:panelGroup>
									<ice:panelTooltip id="icefaces${node.entrySetId}${node.makeId}${node.nodeId}${node.scenarioId}" style="width: 150px;" displayOn="hover" hoverDelay="100" >
						                <f:facet name="header">
						                    Validation
						                </f:facet>
						                <f:facet name="body">
						                    Min Value: ${node.minValue}<br/>
						                    Max Value: ${node.maxValue}
						                </f:facet>
						            </ice:panelTooltip>
						            
						         
						</h:panelGroup>
									
						</c:forEach>
					</h:panelGrid>
				</c:if>
				<br/>
  				   
  			</c:forEach>
  			
  			
     	
     		<script type="text/javascript">
     		//<![CDATA[
     			function validateField(fieldType,fieldId,fieldValue,minValue,maxValue)
     			{
     			  if(fieldValue<minValue || fieldValue>maxValue)
     			  {
     			  	document.getElementById(fieldId).style.backgroundColor = '#FFB3B3';
     			  	
     			  	setTimeout(function() {
      document.getElementById(fieldId).focus();//use javascript to set focus
    },0);
     			  
     			  }
     			  else
     			  document.getElementById(fieldId).style.backgroundColor = '#FFFFFF';
     			 
     			    
     			}
     		//]]>
     		</script>
     		
     		<input type="button" name="Save" value="Save"  style="width: 100px;height: 30px;"/>
     		
     		<h:commandButton id="saveButton"  actionListener="#{factBean.submitFactForm}"  value="Submit" style="width:100px;height:30px;" />
							
     	    <br/><br/> 	    
         </ui:define>
		
		<ui:define name="footer">
	       <ui:include src="../WEB-INF/templates/footer.xhtml" /> 
		</ui:define>
		
	</ui:composition>
	 
</html>